<template>
  <div >
      <div   class="tac  fs28 index-content">欢迎来到{{ VITE_APP_TITLE }}</div>
  </div>
</template>

<script setup name="Index">
const version = ref('3.8.6')
const VITE_APP_TITLE = ref(import.meta.env.VITE_APP_TITLE );

function goTarget(url) {
  window.open(url, '__blank')
}
</script>

<style  lang="scss">
.index-content{
  transition: all 1s ;
  animation: mymove  1s forwards;
}
.index-content:before{
  background: #fff;
    transform: skew(305deg);
    display: inline-block;
    position: relative;
    content: " ";
    border-radius: 50%;
    width: 20px;
    height: 20px;
    left: -30px;
    box-shadow: -1px -1px 6px 0px #f4f4f5;
  animation: mymoveBefore  1s 0.6s forwards;

}
@keyframes mymoveBefore
{
	0% {
    opacity: 0;
    transform: translate3d(0px, 0px, 10px) rotateX(45deg);
  }
  // 30% {
  //   opacity: 0.4;
  //   transform: translate3d(60px, 20px, 10px)  rotateX(45deg);
  // }
  // 60% {
  //   opacity: 0.4;
  //   transform: translate3d(120px, 0px, 10px)  rotateX(45deg);
  // }
  90% {
    opacity: 1;
    transform: translate3d(360px, 20px, 10px)  rotateX(45deg);
  }
	100% {
    opacity: 0;
    transform: translate3d(660px, 0px, 10px)  rotateX(45deg);
  }
}
@keyframes mymove
{
	from {margin-top:0;
    opacity: 0.1;
  }
	to {margin-top:calc(50vh - 100px);
    opacity: 1;
  
  }
}
</style>

